<template>
  <div>
    <a-modal v-model:visible="visible" :footer="false" width="50%" :title="memberInfo.nickname">
      <ma-form v-model="form" :columns="columnsOptions" ref="crudForm" @submit="handlerSubmit" />
    </a-modal>
  </div>
</template>

<script setup>
import {ref, reactive, watch, nextTick} from 'vue'
import {Message} from "@arco-design/web-vue";
import app from "@/config/app.js"
import { request } from '@/utils/request.js'

const emit = defineEmits(['success'])

const levels = app.levels
// form 组件的 ref
const crudForm = ref()
// 表单数据
const form = ref({level:0,remark:''})

// 组件的字段设置
const columnsOptions = ref([
  {title: '等级', dataIndex: 'level', formType: 'select', dict: {data: levels, translation: true}},
  {title: '备注', dataIndex: 'remark', formType: 'input',},
])

const visible = ref(false)
const crudRef = ref()
const memberInfo = ref({})

const open = (record) => {
  memberInfo.value = record
  form.value = {level:record.level.toString(), remark:''}

  visible.value = true
}

// 提交等级变更
const handlerSubmit = (data, done) => {
  // 显示表单提交中状态
  done(true)
  if (data) {
    data.member_id = memberInfo.value.member_id
    request( {
      url: 'prm/member/levelChange',
      method: 'post',
      data:data
    }).then(res => {
      if(res.code === 200){
        Message.success('修改成功')
        emit('success')
        visible.value = false
      }else{
        Message.error(res.message)
      }
    })
  }
  // 关闭表单提交中状态
  done(false)
}

defineExpose({ open })

</script>
